<template>
  <div class="bill">
  <header-bar :text="title" :left="left" ></header-bar>
  
<div class="billallList"
  v-if="list.length > 0"
  v-infinite-scroll="loadMore"
  >
	<div class="bill-list" v-for="(item, key) in list" :key="key" v-if="item.status == 1">
	<div class="bill-head">
    	<div class="bill-type">
      <img v-if="item.type==2" src="../assets/zdc.png"   alt="">
      <img v-else src="../assets/zdt.png" alt="">
      <!-- {{item.type==1? <img src="../assets/zdc.png" alt=""> : <img src="../assets/zdt.png" alt="">}} -->
      </div>
		<div class="bill-head-r">
			<div class="bill-head-r-p">
				<div>{{item.coinType}}</div>
				<div>
					<!-- <span style="color:#EC5757">+11</span> -->
					<span style="color:#353535">{{item.type == 1 ? '-' : '+'}}{{item.amount}}</span>
				</div>
			</div>
			<div class="bill-head-r-p">
				<span style="color:#888">{{item.payTime}}</span>
				<span>
					<!-- <div class="bill-status" style="color:#C0975D;" v-if="item.payStatus==1">审核中</div> -->
					<div class="bill-status" style="color:#888888;" >{{item.type == 1 ? '提币' : '充币'}}成功</div>
				</span>
			</div>
		</div>
    
  </div>
  <!-- <div class="bill-span">
    <div class="bill-time">{{item.payTime}}</div>
    <div class="bill-coin">{{item.coinType}}</div>
  </div> -->
  <!-- <div class="bill-li">
    <p>发款方：{{item.paymentAddress}}</p>
    <p>收款方：{{item.receiveAddress}}</p>
  </div> -->
</div>
</div>
<div class="noData" v-else>暂无数据</div>
  </div>
</template>
<script>
import {
  Header,
  CellSwipe,
  InfiniteScroll,
  Toast,
  Indicator,
  MessageBox
} from "mint-ui";
import moment from "moment";
import { transactList } from "../api/api.js";
import headerBar from "./main/header";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Bill",
  data() {
    return {
      msg: "",
      list: [
        // {
        //   payStatus: 2,
        //   type: 2,
        //   payAmount: 123
        // },
        // {
        //   payStatus: 2,
        //   type: 2,
        //   payAmount: 123
        // }
      ],
      pageNum: 1,
	  pageSize: 5,
	  title: "转账记录",
      left: {
        status: true
      },
    };
  },
  computed:{
    ...mapState([
      "pageInfo"
    ])
  },
  components: {
    headerBar
  },
  methods: {
    getTransactList() {
		let para = {
			id:this.pageInfo.userinfo.id,
			pageNum: this.pageNum,
			pageSize: this.pageSize
		};
	  this.$ajaxGet('billFlow', para).then(res => {
		  Indicator.close();
          if (res.code !== 200) {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
          } else {
            for (var i = 0; i < res.data.length; i++) {
              res.data[i].payTime = moment(
                new Date(res.data[i].createTime)
              ).format("MM-DD HH:mm");
            }
            if (this.list == "") {
              this.list = res.data;
            } else {
              this.list = this.list.concat(res.data);
            }
          }
      });
    },
    loadMore() {
		console.log(1)
    //   Indicator.open("加载中...");
      this.pageNum = this.pageNum + 1;
      this.getTransactList();
    }
  },
  mounted() {
    this.getTransactList();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/bill.css");
</style>
